import React, { Component } from 'react'
import { connect } from 'react-redux'
import { createContainer } from 'utils/hoc'
import { Form } from 'antd'
import ContentBox from 'components/contentBox'
import CustomTable from 'components/common/table'
import { PAGE_SIZE } from 'constants'
import PropTypes from 'prop-types'

import Style from './shoppingcarDetails.css'

class ShoppingcarDetails extends Component {
  static propTypes = {
    getShoppingCarList: PropTypes.func,
    match: PropTypes.any,
    shoppingCarData: PropTypes.any
  }
  constructor (props) {
    super(props)
    this.state = {
      pageNo: 1,
      pageSize: 20
    }
    this.onPageChange = this.onPageChange.bind(this)
    this.onShowSizeChange = this.onShowSizeChange.bind(this)
  }

  getTableCols () {
    return [
      {
        title: '商品编号',
        dataIndex: 'commodityCode',
        key: 'commodityCode',
        width: 100,
        sorter: (a, b) => a.commodityCode - b.commodityCode
      },
      {
        title: '商品名称',
        dataIndex: 'commodityName',
        key: 'commodityName',
        width: 100
      },
      {
        title: '商品价格',
        dataIndex: 'commodityPrice',
        key: 'commodityPrice',
        width: 100,
        sorter: (a, b) => a.commodityPrice - b.commodityPrice,
        render: text => text / 100
      },
      {
        title: '商品图片',
        dataIndex: 'coverImg',
        key: 'coverImg',
        width: 100,
        render: (text, record) => <img src={text.imageUrl} />
      },
      {
        title: '加入购物车时间',
        dataIndex: 'createTime',
        key: 'createTime',
        width: 100,
        sorter: (a, b) => a.createTime - b.createTime
      }
      // {
      //   title: '备注',
      //   dataIndex: 'order',
      //   key: 'order',
      //   width: 100
      // }
    ]
  }

  getUsersTableCols () {
    return [
      {
        title: '用户Id',
        dataIndex: 'userId',
        key: 'userId',
        width: 100
      },
      {
        title: '用户手机号',
        dataIndex: 'mobile',
        key: 'mobile',
        width: 100
      },
      {
        title: '用户名称',
        dataIndex: 'userName',
        key: 'userName',
        width: 100
      },
      {
        title: '用户类型',
        dataIndex: 'memberLevelName',
        key: 'memberLevelName',
        width: 100
      },
      {
        title: '购物车商品数量',
        dataIndex: 'shopCarCount',
        key: 'shopCarCount',
        width: 100
      }
    ]
  }

  componentDidMount () {
    const { pageSize, pageNo } = this.state
    const { id } = this.props.match.params
    this.id = id
    this.props.getShoppingCarList({
      pageSize,
      pageNo,
      userId: id
    })
  }

  onPageChange (pageNo, pageSize) {
    const params = {}
    params.pageNo = pageNo
    params.pageSize = pageSize
    params.userId = this.id
    this.setState({
      pageNo
    })
    this.props.getShoppingCarList(params)
  }

  onShowSizeChange (current, pageSize) {
    this.setState({
      pageSize
    })
    const params = {}
    params.pageNo = current
    params.pageSize = pageSize
    params.userId = this.id
    this.props.getShoppingCarList(params)
  }

  render () {
    const { shoppingCarData } = this.props
    const { pageNo } = this.state
    const pagination = {
      showSizeChanger: true,
      current: pageNo,
      total: shoppingCarData && shoppingCarData.totalCount,
      onChange: this.onPageChange,
      pageSize: PAGE_SIZE
    }
    return (
      <>
        <ContentBox>
          <div className={Style['users-manage-shoppingcar-details']}>
            <div className={Style['users-info-container']}>
              <CustomTable loading={false} columns={this.getUsersTableCols()} dataSource={[{
                userId: shoppingCarData && shoppingCarData.userId,
                mobile: shoppingCarData && shoppingCarData.mobile,
                userName: shoppingCarData && shoppingCarData.userName,
                memberLevelName: shoppingCarData && shoppingCarData.memberLevelName,
                shopCarCount: shoppingCarData && shoppingCarData.shopCarCount
              }]} pagination={false} bordered />
            </div>
            <div className={Style['title']}>数据列表</div>
            <CustomTable loading={!shoppingCarData} columns={this.getTableCols()} dataSource={shoppingCarData && shoppingCarData.shopCarList} pagination={pagination} />
          </div>
        </ContentBox>
      </>
    )
  }
}

const mapState = state => ({
  shoppingCarData: state.users.shoppingCarData
})
const mapDispatch = dispatch => ({
  getShoppingCarList: dispatch.users.getShoppingCarList
})
const FormShoppingcarDetails = Form.create()(ShoppingcarDetails)

export default createContainer(
  connect(
    mapState,
    mapDispatch
  )(FormShoppingcarDetails)
)
